<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>accordion</title>
		<script type="text/javascript" src="../../js/jquery/jquery.js"></script>
		<script type="text/javascript" src="../../js/jqueryui/jquery-ui-debug.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script>
		<script type="text/javascript" src="../../js/ctp/lightlayout/ctp.ui.lightlayout.js"></script>
		<script type="text/javascript" src="../../js/ctp/accordion/ui.accordion.js"></script>
		<script type="text/javascript" src="../../js/ctp/accordion/ctp.ui.accordion.js"></script>
		<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/accordion.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/skins/red/ctp-common.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="../../js/ctp/vwizard/ctp.ui.vwizard.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/tabs/ctp.ui.tabs.js"></script>
		<script type="text/javascript" src="../../js/ctp/radio/ctp.ui.radio.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/textarea/ctp.ui.textarea.js">
		</script>	
		 <script type="text/javascript" src="../../js/ctp/rte/ctp.ui.rte.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/fileupload/ctp.ui.fileupload.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/radiogroup/ctp.ui.radiogroup.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/hwizard/ctp.ui.hwizard.js">
        </script>
		
        <link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validationEngine.jquery.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/label.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/tabs.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radio.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textarea.css" rel="stylesheet" type="text/css"/>	
		<link href="../../css/rte.css" rel="stylesheet" type="text/css"/>       
        <link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>	
		<link href="../../css/fileupload.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/hwizard.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/vwizard.css" rel="stylesheet" type="text/css"/>
		
		
		
		
		<script type="text/javascript">
			var accor1;
			var _lightlayout1;
			var _lightlayout2;
			$(document).ready(	
				function(){
					
					_lightlayout1 = new ctp.ui.gridlayout({
	                    id: 'layoutId1',
	                    layout: 'table',
	                    tableConfig: {
	                        rows: 10,
	                        cols: 2,
	                        cellWidth: 300,
	                        cellHeight: 0,
	                        cellPadding: 5,
	                        cellSpacing: 2
	                    },
	                    defaults: {
	                        ctpType: 'textfield',
	                        display: 'h',
	                        lable: {
	                            width: '30px'
	                        },
	                        element: {
	                            width: '110px'
	                        },
	                        textfield: {},
	                        combobox: {},
	                        listview: {}
	                    },
	                    items: [{
	                        label: {
	                            id: 'label1',
	                            text: '姓名:'
	                        },
	                        element: {
	                            id: 'textfield1',
								width: '500px'
	                        }
	                    }, {
	                        label: {
	                            id: 'label2',
	                            text: '毕业院校:',
	                            width: '60px'
	                        },
	                        element: {
	                            id: 'textfield2'
	                        }
	                    }, {
	                        ctpType: 'combobox',
	                        label: {
	                            id: 'label13',
	                            width: '80px',
	                            text: '去年考核情况:'
	                        },
	                        element: {
	                            id: 'comboboxID',
	                            width: '155px',
	                            items: [{
	                                text: '优秀',
	                                value: 'combobox11'
	                            }, {
	                                text: '良好',
	                                value: 'combobox22'
	                            }, {
	                                text: '合格',
	                                value: 'combobox33'
	                            }, {
	                                text: '不合格',
	                                value: 'combobox4'
	                            }, {
	                                text: '优秀',
	                                value: 'combobox11'
	                            }, {
	                                text: '良好',
	                                value: 'combobox22'
	                            }, {
	                                text: '合格',
	                                value: 'combobox33'
	                            }, {
	                                text: '不合格',
	                                value: 'combobox4'
	                            }]
	                        }
	                    }, {
	                        ctpType: 'radio',
	                        label: {
	                            id: 'label4',
	                            width: '60px',
	                            text: '是否党员:'
	                        },
	                        element: {
	                            id: 'radio1',
	                            label: '是',
	                            checked: false
	                        }
	                    }, {
	                        ctpType: 'listview',
	                        label: {
	                            id: 'label117',
	                            width: '30px',
	                            text: '信仰:'
	                        },
	                        element: {
	                            id: 'listviewID',
	                            width: '155px',
	                            items: [{
	                                text: '佛教',
	                                value: 'fujiao'
	                            }, {
	                                text: '道教',
	                                value: 'daojiao'
	                            }, {
	                                text: '基督教',
	                                value: 'jidujiao'
	                            }, {
	                                text: '天竺教',
	                                value: 'tianzhujiao'
	                            }]
	                        }
	                    }, {
	                        ctpType: 'radiogroup',
	                        label: {
	                            id: 'label118',
	                            width: '30px',
	                            text: '年龄:'
	                        },
	                        element: {
	                            id: 'radioDiv',
	                            itemWidth: 250,
	                            items: [{
	                                id: 'radio11',
	                                label: '18~23岁'
	                            }, {
	                                id: 'radio12',
	                                label: '24~29岁',
	                                value: 'test'
	                            }, {
	                                id: 'radio13',
	                                label: '30~35岁'
	                            }, {
	                                id: 'radio14',
	                                label: '36~41岁'
	                            }, {
	                                id: 'radio15',
	                                label: '42~47岁',
	                                value: 'test'
	                            }, {
	                                id: 'radio16',
	                                label: '48岁以上'
	                            }]
	                        }
	                    }, {
	                        ctpType: 'checkboxgroup',
	                        colspan: 2,
	                        label: {
	                            id: 'label5',
	                            text: '兴趣爱好:',
	                            width: '60px'
	                        },
	                        element: {
	                            id: 'checkboxgroup1',
	                            itemWidth: '60px',
	                            items: [{
	                                id: 'checkbox1',
	                                label: '篮球',
	                                value: 'boxbol'
	                            }, {
	                                id: 'checkbox2',
	                                label: '足球',
	                                value: 'footbox'
	                            }, {
	                                id: 'checkbox2',
	                                label: '游泳',
	                                value: 'swing'
	                            }],
	                            display: 'line',
	                            width: '300px',
	                            validate: 'rules[minCheckbox[2],maxCheckbox[3]]'
	                        }
	                    
	                    }, {
	                        ctpType: 'checkbox',
	                        colspan: 2,
	                        label: {
	                            id: 'label6',
	                            text: '评价:'
	                        },
	                        element: {
	                            id: 'checkbox1',
	                            label: '优秀',
	                            value: 'checkbox1',
	                            checked: false
	                        }
	                    }, {
	                        ctpType: 'textarea',
	                        colspan: 2,
	                        rowspan: 2,
	                        label: {
	                            id: 'label7',
	                            width: '60px',
	                            text: '个人简介:'
	                        },
	                        element: {
	                            id: 'textarea1',
	                            width: '500px',
	                            validate: 'rules[required,length[0,3],custom[onlyLetter]]'
	                        }
	                    }, {
	                        ctpType: 'button',
	                        colspan: 2,
	                        label: {
	                            id: 'label8',
	                            width: '60px',
	                            text: 'form按钮:'
	                        },
	                        element: {
	                            id: 'button2',
	                            text: '选择',
	                            width: '70px',
	                            icon: 'save'
	                        }
	                    }, {
	                        ctpType: 'fileupload',
	                        colspan: 2,
	                        element: {
	                            id: 'fileupId',
	                            extErrMsg: '抱歉，不支持上传该类型文件',
	                            overflowMsg: '抱歉，一次只能上传5个文件',
	                            repeatErrMsg: '所选择的文件已经存在上传文件列表中',
	                            extFilter: 'jpg | bmp | doc | xls/i',
	                            width: '100%'
	                        }
	                    }, {
	                        ctpType: 'rte',
	                        colspan: 2,
	                        element: {
	                            id: 'testid',
	                            width: '99%',
	                            validate: 'rules[required,length[0,3],custom[onlyLetter]]'
	                        }
	                    }]
	                });	

	                _lightlayout2 = new ctp.ui.gridlayout({
	                    id: 'layoutId2',
	                    layout: 'rows',
	                    items: [[{label: {text: '子布局列1:'},element: {type: 'combobox'}},{label: {text: '子布局列2:'},element: {type: 'combobox'}}],
						[{label: {text: '子布局列1:'},element: {type: 'combobox'}},{label: {text: '子布局列2:'},element: {type: 'combobox'}}],
						[{label: {text: '子布局列1:'},element: {type: 'combobox'}},{label: {text: '子布局列2:'},element: {type: 'combobox'}}],
						[{label: {text: '子布局列1:'},element: {type: 'combobox'}},{label: {text: '子布局列2:'},element: {type: 'button'}}]]
	                });
					accor1 = new ctp.ui.accordion({
						width:'100%',
						height:'100%',
						autoHeight:true,
						autoWidth:true,
						active: 0,
						renderTo:'accordionDiv2',
						items:[{
									title:'aa',
									items: [_lightlayout2]
								},{
									title: 'bb',
									items: [new ctp.ui.button()]
								}]
						});
						//_lightlayout1.getJqDom().appendTo('#accordionDiv');
					});
			var _renderTo = function(){
				accor1.renderTo('accordionDiv2');
			}
			var _setHeight = function(){
				accor1.setHeight($('#value').val());
			}
			var _setWidth = function(){
				accor1.setWidth($('#value').val());
			}
			var _setActive = function(){
				accor1.setActive($('#value').val()*1);
			}
			var _setVisible = function(value){
				accor1.setVisible(value);
			}
			var _setPadding = function(){
				accor1.setPadding($('#value').val());
			}
			var _getContentObjs = function(){
				alert(accor1.getObjs().length);
			}
			var _getContentJqDom = function(){
				$.each(accor1.getContentJqDom(),function(i,n){
					alert(n.html());
				});
			}
			var _remove = function(){
				accor1.remove();
			}
			var _adjustHeight = function(){
				$('#accordionDiv2').height($('#accordionDiv2').height()+20);
			}
			var _adjustWidth = function(){
				$('#accordionDiv2').width($('#accordionDiv2').width()+20);
			}
			var _getItem = function(){
				alert(accor1.getItem('textField001').getId());
				accor1.append(_lightlayout1,1)
			}
		</script>
	</head>
	<body>
		<div id="container">accordion</div>
		<div id="accordionDiv">
			<input id='value'></input>
			<button onclick="_renderTo()">加载accordion</button>
			<button onclick="_setHeight()">设置高度</button>
			<button onclick="_setWidth()">设置宽度</button>
			<button onclick="_setActive()">设置标签</button>
			<button onclick="_setPadding()">设置留白</button>
			<button onclick="_setVisible(true)">显示</button>
			<button onclick="_setVisible(false)">隐藏</button>
			<button onclick="_getContentObjs()">获取内部对象数量</button>
			<button onclick="_getContentJqDom()">获取容器</button>
			<button onclick="_remove()">销毁对象</button>
			<button onclick="_adjustHeight()">调整高度</button>
			<button onclick="_adjustWidth()">调整宽度</button>
			<button onclick="_getItem()">根据ID获取对象</button>
			<div style="width:400px;height:400px;overflow:hidden;"></div>
			<div id="accordionDiv2" style="width:400px;height:400px;overflow:hidden;"></div>
		</div>
	</body>
</html>